<template>
  <div class="home">
    <div class="home-content">
      <my-swiper :swiperImgs="swiperData.map(item=>item.icon)" :height="swiperHeight"></my-swiper>
      <activity>
        <div class="activity-520">
          <img v-for="(item,index) in activityDatas" :key="index" :src="item.icon" />
        </div>
      </activity>
      <mode-option></mode-option>
      <Seconds :data="secondDatas"></Seconds>
    </div>
  </div>
</template>

<script>
import MySwiper from '@c/swiper/MySwiper'
import Activity from '@c/currency/Activity'
import ModeOption from '@c/currency/ModeOptions'
import Seconds from '@c/seconds/Seconds'

export default {
  components: {
    MySwiper,
    Activity,
    ModeOption,
    Seconds
  },
  data () {
    return {
      swiperData: [],
      activityDatas: [],
      secondDatas: [],
      swiperHeight: this.$store.state.isIphoneX ? '228px' : '184px'
    }
  },
  created () {
    this.initData()
  },
  methods: {
    initData () {
      // this.$http.get('/swiper')
      //   .then(data => {
      //     this.swiperData = data.list
      //   })
      //   .catch(err => {
      //     console.log(err)
      //   })

      // this.$http.get('/activitys')
      //   .then(data => {
      //     this.activityDatas = data.list
      //   })
      //   .catch(err => {
      //     console.log(err)
      //   })
      this.$http.all([
        this.$http.get('/swiper'),
        this.$http.get('/activitys'),
        this.$http.get('/seconds')
      ]).then(this.$http.spread((swiperData, activityDatas, secondDatas) => {
        this.swiperData = swiperData.list
        this.activityDatas = activityDatas.list
        this.secondDatas = secondDatas.list
      })).catch(err => {
        console.error(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '@css/style.scss';

  .home {
    width: 100%;
    height: 100%;
    background-color: $bgColor;

    &-content {
      height: 100%;

      .activity-520 {
        margin-top: px2rem(-8);
        border-top-left-radius: px2rem(8);
        border-top-right-radius: px2rem(8);

        img {
          display: inline-block;
          width: 33.333%;
        }
      }
    }
  }
</style>
